<template>
	<view>
		<view class="btns-tool">
			<view class="btns-tool-bar">
				<view  @tap="popupShow=true">
					<!-- <text class="time-label">时间</text> -->
						<!-- <text class="img-label" >▼</text> -->
						<!-- <view class="iconfont iconxiasanjiaoxing time-icon"></view> -->
						<image class="img-btn" src="~@/static/img/date.png" mode="aspectFit" @tap="popupShow=true"></image>
						<!-- <image class="dateImg" src="../../../static/img/date.png" mode=""></image> -->
					</view>
				</view>
		</view>
		<mescroll-body ref="mescrollRef" @up="loadList" @init="mescrollInit" :up="upOption" @down="downCallback">
			<view class="person-list">
				<view v-for="(item,index) in salemanList" :key="index" class="person-item" @tap="jumpToCoupons(item.salemanId)">
					<text class="name">{{item.salemanName||''}}</text>
					<text class="count">{{item.count||0}}</text>
				</view>
			</view>
		</mescroll-body>
		<date-popup @determine='determine' :beginDate='beginDate' :endDate='endDate' :popupShow='popupShow' @colosePopup='popupShow=false'></date-popup>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import datePopup from "@/components/datePopup/index.vue"

	export default {
		components: {
			datePopup,
		},
		mixins: [MescrollMixin],
		data() {
			return {
				customCoupon:"", // 优惠券名称
				salemanList:[], // 销售列表
				popupShow:false, // 时间弹窗
				beginDate:'',
				endDate:'',
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5,
				},
			};
		},
		onLoad(option) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			this.customCoupon = option.hasOwnProperty('customCoupon')?option.customCoupon:''
		},
		methods: {
			loadList(page) {
				const params = {
					current: page.num,
					pageSize: page.size,
					customCoupon:this.customCoupon,
					createTimeStart:this.beginDate, // 	开始核销时间
					createTimeEnd:this.endDate	// 开始核销时间
					// customCoupon	优惠券名称
				};
				this.$http.getEsCouponOrderSaleman(params).then((res) => {
					if(res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.salemanList= []
						};
						this.salemanList = this.salemanList.concat(curPageData);
					}
				})
							
			},
			jumpToCoupons(salemanId){
				uni.navigateTo({
					url:'/packageC/pages/experienceCoupons/experienceCouponsDetail?salemanId='+salemanId+'&customCoupon='+this.customCoupon
				})
				// navTo('/packageC/pages/experienceCoupons/experienceCouponsDetail?salemanId='+item.salemanId+'&customCoupon='+customCoupon)
			},
			determine(data,flag){
				if(flag=='clear'){
					this.beginDate=''
					this.endDate=''
				}else{
					this.beginDate=data[0]
					this.endDate=data[1]
				}
				this.popupShow=false
				// console.log(data)
				// console.log(this.beginDate)
				// console.log(this.endDate)
				this.loadList({size:10,num:1})
			},
		},
	}
</script>

<style lang="scss" scoped>
	// 凑合放在这的按钮们 ，随时变位置
	.btns-tool{
		$bar-height:80rpx;
		height: $bar-height;

		.btns-tool-bar{
			z-index: 999;
			/* #ifndef APP-PLUS-NVUE */
			display:flex;
			/* #endif */
			flex-direction:row;
			justify-content: flex-end;
			align-items:center;
			
			position: fixed;
			/* #ifdef H5 */
			top: calc(var(--window-top) + var(--status-bar-height));
			/* #endif */
			/* #ifndef H5 */
			top: var(--window-top);
			/* #endif */
			
			padding: 10rpx 20rpx;
			width: 100%;
			height: $bar-height;
			background-color: #ffffff;
			border-bottom: 2rpx solid $borderColor;
			box-shadow: 0 0 4rpx #f2f2f2;
			z-index: 500;
			.img-btn{
				width: 50rpx;
				height: 50rpx;
			}
			.time-label{
				color: #111111;
				font-size: 28rpx;
				
			}
			.time-icon {
				font-size: 20rpx;
				color: #EA655E;
			}
			.img-label{
				font-size: 12rpx;
				color: #ff0000;
			}
		}
	}
	
	
.person-list{
	padding: 16rpx 32rpx;
	margin-top: 16rpx;
	background-color: #fff;
	.person-item{
		/* #ifndef APP-PLUS-NVUE */
		display:flex;
		/* #endif */
		flex-direction:row;
		justify-content: space-between;
		padding: 16rpx 0rpx;
		text{
			font-size: 28rpx;
		}
		.name{
			color: #999999;
		}
		.count{
			color: #111111;
		}
	}
}
</style>
